<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <!--拼接姓名-->
    {{firstname}}-{{lastname}}
    <!--以属性的形式来显示-->
    {{fullname}}
    <input :class="cla" type="text" :value="fullname" :style="sty">


</div>

</body>
</html>
<script>
    new Vue({
        el:'#app',
        data(){
            //支持js
            return {
                firstname:'孙',
                lastname:'悟空',
                sty:'width:100px',
                cla:'box1 box2'
            }
        },
        //计算属性  针对多个属性需要通过类似于方法的逻辑运行可以使用
        computed:{
            //计算的函数
            fullname(){
                return this.firstname+'~'+this.lastname;
            }

        }
    });
</script>